<template>
  <div class="basic-info">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/renshi/employee/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">基本信息管理</h2>
        <div class="header-actions">
          <el-button type="primary" icon="el-icon-menu" @click="showList">员工列表</el-button>
        </div>
      </div>
    </div>

    <div class="content">
      <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
        <!-- 个人基本信息 -->
        <el-card class="form-card">
          <div slot="header">
            <span><i class="el-icon-user"></i> 个人基本信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="工号" prop="employeeId">
                <el-input v-model="formData.employeeId" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择">
                  <el-option label="男" value="male"></el-option>
                  <el-option label="女" value="female"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="formData.birthday" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="formData.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况" prop="maritalStatus">
                <el-select v-model="formData.maritalStatus" placeholder="请选择">
                  <el-option label="未婚" value="single"></el-option>
                  <el-option label="已婚" value="married"></el-option>
                  <el-option label="离异" value="divorced"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 工作信息 -->
        <el-card class="form-card">
          <div slot="header">
            <span><i class="el-icon-office-building"></i> 工作信息</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="部门" prop="department">
                <el-select v-model="formData.department" placeholder="请选择">
                  <el-option
                    v-for="dept in departments"
                    :key="dept.value"
                    :label="dept.label"
                    :value="dept.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职位" prop="position">
                <el-select v-model="formData.position" placeholder="请选择">
                  <el-option
                    v-for="pos in positions"
                    :key="pos.value"
                    :label="pos.label"
                    :value="pos.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="入职日期" prop="entryDate">
                <el-date-picker v-model="formData.entryDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作状态" prop="workStatus">
                <el-select v-model="formData.workStatus" placeholder="请选择">
                  <el-option label="在职" value="active"></el-option>
                  <el-option label="试用期" value="probation"></el-option>
                  <el-option label="离职" value="resigned"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 联系方式 -->
        <el-card class="form-card">
          <div slot="header">
            <span><i class="el-icon-phone"></i> 联系方式</span>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="formData.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="formData.email"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急联系人" prop="emergencyContact">
                <el-input v-model="formData.emergencyContact"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="紧急联系电话" prop="emergencyPhone">
                <el-input v-model="formData.emergencyPhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="居住地址" prop="address">
                <el-input v-model="formData.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 教育背景 -->
        <el-card class="form-card">
          <div slot="header" class="clearfix">
            <span><i class="el-icon-reading"></i> 教育背景</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="addEducation">
              <i class="el-icon-plus"></i> 添加教育经历
            </el-button>
          </div>

          <el-table :data="formData.education" border style="width: 100%">
            <el-table-column prop="school" label="学校名称" width="180"></el-table-column>
            <el-table-column prop="major" label="专业" width="180"></el-table-column>
            <el-table-column prop="degree" label="学历" width="120"></el-table-column>
            <el-table-column prop="startDate" label="开始时间" width="120"></el-table-column>
            <el-table-column prop="endDate" label="结束时间" width="120"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="removeEducation(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <div class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="submitting">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-form>
    </div>

    <!-- 教育经历对话框 -->
    <el-dialog title="添加教育经历" :visible.sync="educationDialogVisible" width="50%">
      <el-form :model="educationForm" :rules="educationRules" ref="educationForm" label-width="100px">
        <el-form-item label="学校名称" prop="school">
          <el-input v-model="educationForm.school"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="educationForm.major"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="degree">
          <el-select v-model="educationForm.degree" placeholder="请选择">
            <el-option label="高中" value="highschool"></el-option>
            <el-option label="专科" value="college"></el-option>
            <el-option label="本科" value="bachelor"></el-option>
            <el-option label="硕士" value="master"></el-option>
            <el-option label="博士" value="doctor"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起止时间" prop="dateRange">
          <el-date-picker
            v-model="educationForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="educationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddEducation">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 员工列表对话框 -->
    <el-dialog title="员工列表" :visible.sync="listDialogVisible" width="80%">
      <div class="filter-section">
        <el-input
          v-model="searchQuery"
          placeholder="请输入工号/姓名/部门"
          style="width: 200px"
          clearable
          @keyup.enter.native="handleSearch">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-select v-model="departmentFilter" placeholder="部门筛选" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="技术部" value="技术部"></el-option>
          <el-option label="人事部" value="人事部"></el-option>
          <el-option label="财务部" value="财务部"></el-option>
        </el-select>
      </div>
      
      <el-table :data="employeeList" border stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="employeeId" label="工号" width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80">
          <template slot-scope="scope">
            {{ scope.row.gender === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="department" label="部门" width="120"></el-table-column>
        <el-table-column prop="position" label="职位" width="120"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editEmployee(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteEmployee(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BasicInfo',
  data() {
    return {
      submitting: false,
      formData: {
        employeeId: 'EMP' + new Date().getTime(),
        name: '',
        gender: '',
        birthday: '',
        idCard: '',
        maritalStatus: '',
        department: '',
        position: '',
        entryDate: '',
        workStatus: '',
        phone: '',
        email: '',
        emergencyContact: '',
        emergencyPhone: '',
        address: '',
        education: []
      },
      departments: [
        { value: 'hr', label: '人力资源部' },
        { value: 'tech', label: '技术部' },
        { value: 'finance', label: '财务部' }
      ],
      positions: [
        { value: 'staff', label: '普通员工' },
        { value: 'manager', label: '经理' },
        { value: 'director', label: '主管' }
      ],
      educationDialogVisible: false,
      educationForm: {
        school: '',
        major: '',
        degree: '',
        dateRange: []
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        department: [{ required: true, message: '请选择部门', trigger: 'change' }],
        position: [{ required: true, message: '请选择职位', trigger: 'change' }],
        entryDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }]
      },
      educationRules: {
        school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
        major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
        degree: [{ required: true, message: '请选择学历', trigger: 'change' }],
        dateRange: [{ required: true, message: '请选择起止时间', trigger: 'change' }]
      },
      listDialogVisible: false,
      searchQuery: '',
      departmentFilter: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      employeeList: [
        {
          employeeId: 'EMP001',
          name: '张三',
          gender: 'male',
          department: '技术部',
          position: '工程师',
          phone: '13800138000',
          email: 'zhangsan@company.com'
        },
        {
          employeeId: 'EMP002',
          name: '李四',
          gender: 'female',
          department: '人事部',
          position: '主管',
          phone: '13800138001',
          email: 'lisi@company.com'
        }
      ]
    }
  },
  methods: {
    addEducation() {
      this.educationDialogVisible = true
      this.$nextTick(() => {
        this.$refs.educationForm?.resetFields()
      })
    },
    confirmAddEducation() {
      this.$refs.educationForm.validate(valid => {
        if (valid) {
          const [startDate, endDate] = this.educationForm.dateRange
          this.formData.education.push({
            ...this.educationForm,
            startDate,
            endDate
          })
          this.educationDialogVisible = false
        }
      })
    },
    removeEducation(index) {
      this.formData.education.splice(index, 1)
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submitting = true
        // TODO: 发送请求保存数据
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('保存成功')
      } catch (error) {
        console.error(error)
        this.$message.error('表单验证失败，请检查必填项')
      } finally {
        this.submitting = false
      }
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.formData.education = []
    },
    showList() {
      this.listDialogVisible = true;
      this.loadEmployeeList();
    },
    handleSearch() {
      this.currentPage = 1;
      this.loadEmployeeList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadEmployeeList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadEmployeeList();
    },
    loadEmployeeList() {
      let filteredList = [...this.employeeList];
      
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        filteredList = filteredList.filter(item => 
          item.employeeId.toLowerCase().includes(query) ||
          item.name.toLowerCase().includes(query) ||
          item.department.toLowerCase().includes(query)
        );
      }
      
      if (this.departmentFilter) {
        filteredList = filteredList.filter(item => 
          item.department === this.departmentFilter
        );
      }
      
      this.total = filteredList.length;
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.employeeList = filteredList.slice(start, end);
    },
    editEmployee(employee) {
      // TODO: 实现编辑功能
      console.log('编辑员工:', employee);
    },
    deleteEmployee(employee) {
      this.$confirm('确认删除该员工信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除API
        this.$message.success('删除成功');
        this.loadEmployeeList();
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-info {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
      }

      .header-actions {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .content {
    .form-card {
      margin-bottom: 20px;
      
      :deep(.el-card__header) {
        padding: 15px 20px;
        border-bottom: 1px solid #EBEEF5;
        
        span {
          font-size: 16px;
          font-weight: 500;
          
          i {
            margin-right: 5px;
            color: #409EFF;
          }
        }
      }
    }

    .form-actions {
      text-align: center;
      margin-top: 30px;
      padding-bottom: 50px;
    }
  }

  .filter-section {
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.full-width {
  width: 100%;
}
</style> 